<template>
  <div class="type">
    <van-search
      class="fixed search"
      v-model="keyword"
      @input="onSearch"
      placeholder="请输入搜索关键词"
    />

    <van-tree-select
      height="55vw"
      :items="items"
      :main-active-index.sync="activeIndex"
    >
      <template #content>
        <ul class="flex jc-sa fww">
          <li class="item" v-for="item in productList" :key="item.productId">
            <img :src="item.imgUrl" alt="" />
            <p class="f12">{{ item.masterName }} 12枚装（75mm+/枚</p>
          </li>
        </ul>
      </template>
    </van-tree-select>

    <Footer></Footer>
  </div>
</template>

<script>
import $http from "@/utils/request.js";
import Footer from "@/components/Footer.vue";
export default {
  //注册组件
  components: {
    Footer,
  },
  data() {
    return {
      keyword: "",
      items: [],
      activeIndex: -1,
      productList: [],
    };
  },
  created() {
    this.getTypeList();
    
  },
  watch:{
    activeIndex(newIndex) {
      let categoryId = this.items[newIndex].categoryId;
      this.getProductList(categoryId);
    }
  },
  methods: {
    onSearch() {
      if(!this.keyword){
        let categoryId = this.items[this.activeIndex].categoryId;
        this.getProductList(categoryId);
      }else{
        let params = { keyword: this.keyword };
      $http.post("/product/search", params).then((res) => {
        this.productList = res.list;
      });
      this.activeIndex =-1
      }
      
    },
    getTypeList() {
      $http.get("/category/all").then((res) => {
        let index = this.$route.query.index;
        this.activeIndex = index || 0;
        this.items = res.list.map((item) => {
          return {
            ...item,
            text: item.name,
          };
        });
      });
    },
    getProductList(categoryId) {
      let params = {categoryId:categoryId}
      $http.get("/product/list",{params}).then((res) => {
        this.productList = res.list;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.type {
  padding-top: 50px;
  .search {
    top: 0;
    width: 100%;
    z-index: 10;
  }

  .item {
    width: 100px;
  }

  img {
    width: 90px;
  }

  .van-tree-select {
    min-height: 100vh;
  }
  .van-tree-select__content {
    min-height: 100vh;
  }
  .van-sidebar-item--select::before {
    height: 90%;
    width: 2px;
  }
}
</style>
